<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>尚硅谷会员注册页面</title>

	<!-- src 路径从根目录算起，上一级为 WebContent，再上一级是根目录 book_city_project -->
	<%-- 静态包含 base标签，jquery、css样式 --%>
	<%@ include file="/pages/common/header.jsp" %>
<script type="text/javascript">
	$(function(){
		// 根据id注册按钮单击事件
		$("#sub_btn").click(function(){
//			验证用户名： 必须由字母，数字，下划线组成，并且长度为 5 到 12 位
			//1.获取用户内容
			var usernameText = $("#username").val();
			//2.创建一个正则表达式
			var usernamePatt = /^\w{5,12}$/;
			//3.调用test 方法验证 
			if( !usernamePatt.test(usernameText)){
				// 4. 提示用户验证的结果
				$("span.errorMsg").text("用户名不合法");
				return false;
			}
			
			$("#span.errorMsg").text("");
			
			// 验证密码：必须由字母，数字，下划线组成，并且长度为 5 到 12 位
			// 1.获取密码内容
			var passwordText = $("#password").val();
			// 2.创建一个正则表达式
			var passwordPatt =  /^\w{5,12}$/;
			// 3.使用test 方法验证
			if( !passwordPatt.test(passwordText)){
				// 4. 提示密码验证的结果
				$("span.errorMsg").text("密码不合法");
				return false;
			}
			
			$("#span.errorMsg").text("");
			
			// 验证确认密码和密码相同
			// 1.获取确认密码
			var repwdText = $("#repwd").val();
			// 2.跟密码比较
			if( repwdText != passwordText){
				//3.提示用户比较的结果
				$("span.errorMsg").text("确认密码和密码不一致");
				return false;
			}
			
			$("#span.errorMsg").text("");

			// 1.邮箱验证： xxxxxx@xxx.com
			var emailText = $("#email").val();
			//2 创建正则表达 式
			var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
			//3 调用test方法验证
			if (!emailPatt.test(emailText)) {
				//4 提示用户验证结果
				$("span.errorMsg").text("邮箱格式不合法！");
				return false;
			}
		
			// 验证码： 现在只需要验证用户已输入。后面编写服务器代码时，会由服务器生成并发送到前端
			var codeText = $("#code").val();
			alert("去空格前： ["+ codeText +"]");
			codeText = $.trim(codeText);
			alert("去空格后： ["+ codeText +"]");
			
			if(codeText == ""){
				$("span.errorMsg").text("验证码不能为空");
				return false;
			}
			
			// 以上校验都通过后，需要清空提示信息
			$("span.errorMsg").text("");
			
			return true;	
		});
	});
</script>
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
<style type="text/css">
	.login_form{
		height:420px;
		margin-top: 25px;
	}
	
</style>
</head>
<body>
		<div id="login_header">
			<img class="logo_img" alt="" src="static/img/logo.gif" >
		</div>
		
			<div class="login_banner">
			
				<div id="l_content">
					<span class="login_word">欢迎注册</span>
				</div>
				
				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="tit">
								<h1>注册尚硅谷会员</h1>
								<span class="errorMsg">
									${ requestScope.msg }
								</span>
							</div>
							<div class="form">
								<form action=userServlet method="post">
									<label>用户名称：</label>
									<input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" 
									value="${ requestScope.username }"/>
									<br />
									<input type="hidden" name="action" value="regist"/>
									<br />
									<label>用户密码：</label>
									<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password"/>
									<br/>
									<br/>
									<label>确认密码：</label>
									<input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
									<br/>
									<br/>
									<label>电子邮件：</label>
									<input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email" value="${ requestScope.email }"/>
									<br/>
									<br/>
									<label>验证码：</label>
									<input class="itxt" type="text" style="width: 150px;" id="code" name="code" value=""/>
									<img alt="" src="static/img/code.bmp" style="float: right; margin-right: 40px">									
									<br/>
									<br/>
									<input type="submit" value="注册" id="sub_btn" />
									
								</form>
							</div>
							
						</div>
					</div>
				</div>
			</div>
			<%-- 静态包含页脚 --%>
			<%@ include file="/pages/common/footer.jsp" %>
</body>
</html>